<template>
  <div class="elective_register">
    <van-nav-bar
        v-if="$store.state.device !== 'APP'"
        title="报读申请"
        left-arrow
        @click-left="$router.go(-1)"/>
    <div class="list_cell">
      <div class="item_cell">
        <span>{{product_name}}</span>
        <span class="orange">￥{{end_price}}</span>
      </div>
      <div class="item_cell">
        <span>专业简介</span>
        <span class="default">{{description}}</span>
      </div>
    </div>
    <div class="list_cell">
      <div class="item_cell">
        <span>报读人信息</span>
      </div>
      <div class="item_cell">
        <span>姓名</span>
        <van-field v-model="userName" placeholder="请输入姓名" />
      </div>
      <div class="item_cell">
        <span>手机号</span>
        <van-field type="number" v-model="userPhone" placeholder="请输入手机号" />
      </div>
    </div>
    <div class="list_cell">
      <div class="service_title">
        <span class="l_span">—·</span>
        <span class="m_span">专属服务</span>
        <span class="r_span">·—</span>
      </div>
      <div class="tab_item">
        <div class="title_p">1、在线学习，全网考<i class="inco_img"></i></div>
        <div class="title_span">在家就能学，在企业就能考</div>
      </div>
      <div class="tab_item">
        <div class="title_p">2、享院校助学金<i class="inco_img2"></i></div>
        <div class="title_span">来自院校的学费减免，报读时抵扣学费</div>
      </div>
      <div class="tab_item">
        <div class="title_p">3、享教学及退费保障<i class="inco_img3"></i></div>
        <div class="title_span">院校直接教学，教学有保障报读，审核不通过直接100%退费</div>
      </div>
    </div>
    <div class="bottom_btn" @click="setReadUser">
      提交申请
    </div>
  </div>
</template>
<script>
import { isMobile } from '../../../utils/validate'
export default {
  name: 'elective_register',
  components: {},
  data () {
    return {
      product_name: '',
      product_id: '',
      description: '',
      school_code: '',
      end_price: '',
      order_admin_id: '',
      userName: '',
      learn_center_id: 0,
      userPhone: ''
    }
  },
  props: {},
  watch: {
    userPhone: function (newValue, oldValue) {
      this.userPhone = newValue.replace(/[^\d]/g, '')
      this.userPhone = newValue.substring(0, 11)
    }
  },
  methods: {
    /* wf_Huang 2019/9/11 0011 获取用户数据 */
    getUser () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/getPrepareUserInfoByOpenId.html?openid=${this.$store.state.openid}&school_id=${this.$store.state.elective.school_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          // this.$toast(res.msg)
          return false
        }
        this.userName = res.data.name
        this.userPhone = res.data.phone
        this.learn_center_id = res.data.learn_center_id
        this.order_admin_id = res.data.admin_id // 下单人id
      }).catch(() => {})
    },
    /* wf_Huang 2019/8/23 0023 提交预报度  */
    setReadUser () {
      if (this.userName === '') {
        this.$toast('请输入姓名')
        return false
      }
      if (!isMobile(this.userPhone)) {
        this.$toast('请输入正确手机号')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/addPrepareOrder.html?openid=${this.$store.state.openid}&order_admin_id =${this.order_admin_id}&user_name=${this.userName}&phone=${this.userPhone}&school_id=${this.$store.state.elective.school_id}&learn_center_id=${this.learn_center_id === 0 ? this.$store.state.elective.center_id : this.learn_center_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          // this.$toast(res.msg)
          return false
        }
        this.$toast('恭喜申请成功,即将前往报读缴费平台')
        this.setUrl()
      }).catch(() => {})
    },
    /* wf_Huang 2019/8/24 0024  http://eapi.ttt.eenet.com/example/createSign.html?learn_center_id=8038&school_id=041&appid=YX_1hl5v2fs8w&product_id=30562&user_name=dddddd&phone=15179236849 */
    setUrl () {
      let appid = 'YX_1jj5xp1utz'
      if (window.SITE_CONFIG['readSetURL'] === 'http://eapi.ttt.eenet.com') { // 测试机
        if (this.$store.state.elective.school_id === '407') {
          this.school_code = '041'
        } else {
          this.school_code = '081'
        }
        appid = this.$route.query.device !== 'APP' ? 'YX_1jjqb8kpr4' : 'YX_1jjqb35o5c'
      } else {
        if (this.$store.state.elective.school_id === '407') {
          this.school_code = '041'
        } else {
          this.school_code = '081'
        }
        appid = this.$route.query.device !== 'APP' ? 'YX_1jjqb0asg0' : 'YX_1jjqb5ljq8'
      }
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/example/createSign.html`,
        method: 'post',
        data: {
          learn_center_id: this.learn_center_id === 0 ? this.$store.state.elective.center_id : this.learn_center_id,
          school_id: this.$store.state.elective.school_id,
          appid: appid,
          product_id: this.product_id,
          user_name: this.userName,
          school_code: this.school_code,
          show_learn_center: 2,
          openid: this.$store.state.openid,
          phone: this.userPhone
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          return false
        }
        // window.location.href
        setTimeout(function () {
          window.location.href = `${window.SITE_CONFIG['readSetURL']}/orderapi/signUp?${res.data.uri}`
        }, 1500)
      }).catch(() => {})
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#f2f2f2')
    this.product_name = this.$route.query.product_name
    this.product_id = this.$route.query.product_id
    this.description = this.$route.query.description
    this.end_price = this.$route.query.end_price
    if (this.$store.state.device === 'WX') {
      this.getUser()
    }
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .elective_register {
    .list_cell{
      padding: 10px 0 10px 30px;
      background-color: #ffffff;
      margin-bottom: 20px;
      .item_cell{
        border-bottom: 2px solid #efefef;
        display: flex;
        justify-content: space-between;
        padding: 0 30px 0 0;
        &:last-child{
          border: 0;
        }
        span{
          padding: 30px 0;
          font-size: 28px;
          color: #222222;
          &:nth-child(1){
            min-width: 150px;
          }
        }
        .orange {
          color: #ff801a;
        }
        .default {
          color: #999999;
        }
      }
      .service_title{
        text-align: center;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        span{
          display: inline-block;
          vertical-align: middle;
          font-size: 36px;
        }
        .m_span {
          padding: 0 50px;
        }
      }
      .tab_item{
        margin: 0 0 30px 30px;
        border-bottom: 1px solid #efefef;
        padding-bottom: 30px;
        &:last-child{
          border: 0;
        }
      }
      .title_p{
        font-size: 28px;
        line-height: 40px;
        color: #333333;
        i{
          margin-left: 15px;
        }
      }
      .inco_img{
        display: inline-block;
        background-image: url(../../../assets/img/modules/read/sprite.png);
        background-position: 94.07115% 34.4086%;
        width: 38px;
        height: 29px;
        background-size: 1431.57895% 1703.44828%;
        vertical-align: middle;
      }
      .inco_img2{
        display: inline-block;
        background-image: url(../../../assets/img/modules/read/sprite.png);
        background-position: 92.607% 49.78261%;
        width: 30px;
        height: 34px;
        background-size: 1813.33333% 1452.94118%;
        vertical-align: middle;
      }
      .inco_img3{
        display: inline-block;
        background-image: url(../../../assets/img/modules/read/sprite.png);
        background-position: 92.607% 64.42516%;
        width: 30px;
        height: 33px;
        background-size: 1813.33333% 1496.9697%;
        vertical-align: middle;
      }
      .title_span{
        font-size: 24px;
        color: #999999;
        line-height: 40px;
        text-indent: 40px;
      }
    }
    .bottom_btn{
      background: #C41511;
      color: #fff;
      text-align: center;
      height: 90px;
      line-height: 90px;
      font-size: 32px;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
</style>
